{extend name="index:layout" /}

{block name="menu"}
<ul class="qb_ui_page_menu">
{if ($fid<3)}
	<li><a href="{:urls('index')}" class="red">已安装的模块</a></li>
	<li><a href="{:urls('add')}" class="blue">本地未安装的模块</a></li> 
{/if}	
</ul>
{/block}

{block name="content"}
<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf("MSIE") >= 0) {
	alert("请使用谷歌或火狐访问.其它浏览器无法操作与使用");
}
//-->
</script>
<style>
.MarketBox{
	padding: 5px;
	font-size:12px;
}
.MarketBox:after{
	content: '';
	display: block;
	clear: both;
}
.MarketBox li{
	float:left;
	width: 20%;
	overflow: hidden;
}
.MarketBox li dl{
	border:#EEE solid 1px;
	margin: 10px;
	border-radius: 3px;
}
.MarketBox li dl:hover{
	box-shadow: 3px 3px 3px #AAA;
}
.MarketBox li dl dt{
	margin: 3px;
	overflow: hidden;
	position: relative;
}
.MarketBox li dl dt:before{
	content: '';
	display: block;
	padding-top: 75%;
}
.MarketBox li dl dt img{
	position:absolute;
	width:100%;
	height:100%;
	left:50%;
	top: 50%;
  -webkit-transform: translate3D(-50%, -50%, 0);
      -ms-transform: translate3D(-50%, -50%, 0);
          transform: translate3D(-50%, -50%, 0);
}
.MarketBox li dl dd{
	padding: 10px;
}
.MarketBox li dl dd h3,.MarketBox li dl dd div{
	height:25px;
	line-height: 25px;
	overflow: hidden;
	color: #777;
}
.MarketBox li dl dd h3{
	font-size:16px;
	font-weight: normal;
	color: #333;
}
.MarketBox li dl dd h3 span{
	display: inline-block;
	line-height: 23px;
	background: #F30;
	padding: 0 5px;
	font-size:12px;
	color: #FFF;
	margin-left: 5px;
	border-radius: 5px;
}
.MarketBox li dl dd	.price{
	font-size:14px;
	font-weight: bold;
	color: #1EBFB5;
}
.MarketBox li dl dd	.red{
	color:red;
}
.MarketBox li dl dd .other a{
	color:#3D8EC1;
}
.MarketBox li dl dd .butter{
	height: 30px;
	padding: 5px 0;	
}
.MarketBox li dl dd .butter a{
	display: inline-block;
	line-height: 30px;
	background: #18BD9D;
	padding: 0 10px;
	color: #FFF;
	margin-right: 5px;
	border-radius: 5px;
}
.MarketBox li dl dd .butter a:before{
	padding-right: 3px;
}
.MarketBox li dl dd .butter a.fa-bolt{
	background: #349ADB;
}
.MarketBox li dl dd .butter a:hover{
	background: #F30;
}
</style>
<div class="MainContainers">
  <div class="Header"><span class="tag">{if ($fid==2)}功能插件{elseif ($fid==4)/}模板风格{elseif ($fid==3)/}钩子功能{else/}频道模块{/if}应用市场</span><span class="more">::</span></div>
  <div class="Conter">
	<ul class="MarketBox Markercontents">	
<!--
		<li>
			<dl>
				<dt><img onerror="this.src='__STATIC__/images/nopic.png'" src="{$rs.picurl}"></dt>
				<dd>
					<h3>{$rs.title}<span>热门</span></h3>
					{gt name="$rs.price" value="0"}
						<div class="price red">&yen; {$rs.price}</div>
					{else /}
						<div class="price blue">免费</div>
					{/gt}
					<div class="other">作者：<a href="{$rs.author_url}">{$rs.author}</a></div>
					<div class="other">介绍：{$rs.about}</div>
					<div class="other">版本：{$rs.ver}</div>
					<div class="other">更新时间：{$rs.time}</div>
					<div class="butter">
						<a href="{:urls('market',['id'=>$rs['id']])}" class="fa fa-cloud-download">安装</a>
						{notempty name="$rs.demo"}<a href="{$rs.demo}" target="_blank" class="fa fa-bolt">在线演示</a>{/notempty}
					</div>
				</dd>
			</dl>
		</li>
-->
	</div>
	<div class="ShowPage ShowMoreInfo" style="margin-bottom:20px:text-align:center;width:100%;"><span style="width:200px;margin:auto;display:block;padding:8px;background:#eee;" onclick="showlist()">显示更多</span></div>
</div>

<script type="text/javascript">
var page = 1;
function showlist(){
	$.get('https://x1.php168.com/appstore/wxapp.index/index/fid/{$fid}.html?rows=20&page='+page+'&'+Math.random(),function(res){
		if(res.code==0){
			page++;
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
				$('.ShowMoreInfo span').attr('onclick','');
				$('.ShowMoreInfo span').html('显示完了');
				$('.ShowMoreInfo span').css({'background':'#CCC'});
			}else{
				var str = '';
				res.data.forEach((rs)=>{
					str +='<li>'+
							'<dl>'+
								'<dt><img onerror="this.src=\'__STATIC__/images/nopic.png\'" src="'+rs.picurl+'"></dt>'+
								'<dd>'+
									'<h3>'+rs.title+'<span>'+(rs.downs>10?'热门':'')+'</span></h3>'+
										(rs.price>0 ? '<div class="price red">&yen; '+rs.price+' 元</div>':'<div class="price blue">免费</div>')+
									'<div class="other">作者：<a href="'+rs.author_url+'">'+rs.author+'</a></div>'+
									'<div class="other">介绍：'+rs.about+'</div>'+
									'<div class="other">版本：'+rs.version+'</div>'+
									'<div class="other">更新时间：'+rs.time+'</div>'+
									'<div class="butter">'+
										'<a href="javascript::" onclick="setup_app('+rs.id+',\''+rs.app_keywords+'\','+rs.price+')" class="fa fa-cloud-download">在线安装</a>'+
										'<a href="'+rs.author_url+'" target="_blank" class="fa fa-bolt">查看演示</a>'+
									'</div>'+
								'</dd>'+
							'</dl>'+
						'</li>';
				});
				$('.Markercontents').append(str);
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
showlist();

var have_pay = [];
function setup_app(id,keywords,price,have_open_layer){
	if(have_pay[id]==undefined){
		have_pay[id]=0;
	}
	var baseurl = "?id=" + id + "&domain={:request()->domain()}&appkey={:config('webdb.mymd5')}&";
	if(price>0 && have_pay[id]<1){	//收费模块,先要做权限判断
		//安装权限检查
		$.get("https://x1.php168.com/appstore/getapp/client_check.html"+baseurl+'&'+Math.random(),function(res){
			if(res.code==0){	//已经购买过,有权限安装
				have_pay[id] = 1;
				setup_app(id,keywords,price);
			}else if(res.code==1){	//还没购买,没权限安装
				if(have_open_layer==1){	//没有成功付款购买
					return '';
				}
				layer.confirm('当前模块需要付费,你还要安装吗?', {
					btn : [ '继续安装', '取消安装' ]
				}, function(index) {
					layer.close(index);
					//此处请求后台程序，下方是成功后的前台处理……
					//var index = layer.load(1,{shade: [0.7, '#393D49']}, {shadeClose: true}); //0代表加载的风格，支持0-2
					var server_url = "https://x1.php168.com/appstore/getapp/index.html" + baseurl;
					layer_buy_iframe(server_url,id,keywords,price);
				});
				//layer.alert(res.data.money);
			}else{
				layer.alert('网络故障',{time:5500});
			}
		}).fail(function (res) {
			layer.alert('网络故障,请晚点再偿试安装!!');
		});
		return ;
	}
	layer.alert('安装需要一点时间,请耐心等候...');
	var index = layer.load(1,{shade: [0.7, '#393D49']}, {shadeClose: true}); //0代表加载的风格，支持0-2
	//模块下载安装
	var url = "{:urls('market')}" + baseurl + "keywords=" + keywords + "&type=down";
	$.get(url+'&'+Math.random(),function(res){
		layer.close(index);
		if(res.code==0){
			layer.confirm(res.msg, {
					btn : [ '设置权限', '不设置' ]
				}, function(index) {
					window.location.href = res.data.url;
			});
		}else{
			layer.alert(res.msg);
		}
	}).fail(function (res) {
		layer.close(index);
		layer.alert('网络故障,请晚点再偿试!你若已付费,下次安装不会重复扣费');
    });
}

function layer_buy_iframe(url,id,keywords,price){
				layer.open({
				  type: 2,
				  title: '设置',
				  shadeClose: true,
				  shade: false,
				  maxmin: true, //开启最大化最小化按钮
				  area: ['60%', '80%'],
				  content: url,
				  end: function(){
					  setup_app(id,keywords,price,1);
					  //alert(77)
						//window.location.reload();
					}
				});
			}
</script>

{/block}